#components-layout-demo-custom-trigger .trigger {
  padding: 0 24px;
  font-size: 18px;
  line-height: 64px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.header {
  background: #fff;
}

.ant-layout-sider-children>.ant-menu {
  background-color: rgb(77, 120, 205);
  height: 100vh;
  /* background-color: rgb(77, 120, 205); */
  background: linear-gradient(to right, rgb(96, 140, 226), rgb(63, 105, 188));
}

.ant-menu-sub {
  background: linear-gradient(to right, rgb(65, 106, 187), rgb(57, 93, 165)) !important;
}

.ant-menu-submenu ul {
  background-color: rgb(76, 118, 202) !important;
}

.ant-menu-submenu ul .ant-menu-item-selected {
  background-color: rgb(133, 165, 227) !important;
}

.ant-menu-submenu ul .ant-menu-item-active {
  background-color: rgb(133, 165, 227) !important;
}

.ant-menu-item-selected,
.ant-menu-item:hover {
  background-color: none !important;
}

.ant-menu-sub li:hover~.ant-menu-sub+div {
  background-color: none !important;
}

.ant-menu-item,
.ant-menu-submenu div,
.ant-menu-submenu div i {
  color: #fff !important;
}

.ant-menu-item:hover,
.ant-menu-submenu:hover div {
  background-color: rgb(133, 165, 227) !important;
}

.ant-menu-item:hover span a,
.ant-menu-submenu:hover div span,
.ant-menu-submenu:hover div i {
  color: rgb(231, 237, 250) !important;
}

.ant-menu-title-content a {
  color: rgb(231, 237, 250) !important;
}

.ant-menu-item-selected {
  background-color: rgb(133, 165, 227) !important;
}

.ant-menu-title-content a:hover {
  color: none;
}

.ant-menu-item-active {
  color: #fff !important;
}

.site-layout {
  margin-left: 25px;
}

.system-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.system-title {
  display: flex;
  align-items: center;
  width: 200px;
  justify-content: space-evenly;
  color: #fff;
  background: linear-gradient(to right, rgb(96, 140, 226), rgb(63, 105, 188));
}

.system-title .system-title-icon {
  height: 40px;
  width: 40px;
}

.system-title .system-title-name {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
}

.system-header-right {
  z-index: 1;
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-shadow: 0 5px 14px 0px rgba(62, 62, 62, 0.1);
}

.system-header-right>.anticon {
  font-size: 18px;
  color: rgb(120, 122, 125);
}

.right>.anticon {
  line-height: 64px;
  font-size: 18px;
  margin-right: 20px;
  color: rgb(120, 122, 125);
}

.right {
  display: flex;
}

.right .ant-avatar {
  margin-right: 7px;
  transform: translate(0, -2px);
}

.system-header-right .anticon-down {
  margin-left: 7px;
  font-size: 14px;
  color: rgb(120, 122, 125);
}

.user-menu {
  cursor: pointer;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

.user-menu:hover {
  color: #1890ff;
}

.user-menu:hover .anticon-down {
  color: #1890ff;
}

.ant-menu-item-selected,
.ant-menu-item:hover {
  background-color: rgb(133, 165, 227) !important;
}

.submenu:hover div {
  background-color: rgb(133, 165, 227) !important;
}
